<template>
  <div class="app-container">
    <el-form :model="query" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="项目名称" prop="projectName">
        <el-input
          v-model="query.projectName"
          placeholder="请输入项目名称"
          clearable
        />
      </el-form-item>
      <el-form-item label="项目分类" prop="categoryIds" >
      <!-- <el-cascader
          v-model="query.categoryIds"
           placeholder="试试搜索：指南"
           :options="cateTree"
           filterable
         ></el-cascader> -->
         <el-select v-model="query.categoryId">
           <el-option
                 v-for="item in cateTree"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
               </el-option>
         </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd(null)"
          v-hasPermi="['system:dept:add']"
        >新增</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="findPage"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="tableList">
      <el-table-column prop="projectName" label="项目名称" width="200"></el-table-column>
      <el-table-column prop="projectAmount" label="项目金额" width="90"></el-table-column>
<!--      <el-table-column prop="technicianRate" label="技师分配比例" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.technicianRate}}%</span>
        </template>
      </el-table-column> -->
      <el-table-column prop="categoryName" label="分类名称" width="100"></el-table-column>
      <el-table-column label="状态" align="center" key="dataStts">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.dataStts"
            :disabled="scope.row.id == 1"
            :active-value="1"
            :inactive-value="0"

            @change="handleStatusChange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
      <el-table-column label="修改时间" align="center" prop="modifyDate" width="200">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.modifyDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:dept:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.catLevel == 1"
            icon="el-icon-plus"
            @click="handleAdd(scope.row)"
            v-hasPermi="['system:dept:add']"
          >新增</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:dept:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
          v-show="total>0"
          :total="total"
          :page.sync="query.pageNum"
          :limit.sync="query.pageSize"
          @pagination="findPage"
        />

    <!-- 添加或修改部门对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="150px">
  <!--      <el-row>
          <el-col :span="24">
            <el-form-item label="项目分类" prop="categoryIds">
              <el-cascader
                 v-model="form.categoryIds"
                  placeholder="试试搜索：指南"
                  :options="cateTree"
                  filterable
                ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row> -->

         <el-row>
            <el-col :span="24">
              <el-form-item label="项目分类" prop="categoryIds">
              <el-select v-model="form.categoryId">
                <el-option
                      v-for="item in cateTree"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
              </el-select>
               </el-form-item>
            </el-col>
          </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="项目名称" prop="projectName">
              <el-input v-model="form.projectName" placeholder="请输入项目名称" maxlength="80" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="项目金额" prop="projectAmount">
               <el-input-number v-model="form.projectAmount" :precision="2" controls-position="right" :min="0.01" :max="999999.99"/>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="24">
            <el-form-item label="技师分配比例" prop="technicianRate">
               <el-input-number v-model="form.technicianRate" :precision="2" controls-position="right" :min="0.01" :max="100.00"/> %
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row>
          <el-col :span="24">
            <el-form-item label="显示排序" prop="orderNum">
              <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import { findPage, saveConfig, modifyConfig, delConfig,modifyStts } from "@/api/project/config";
import { findTree } from "@/api/project/category";
import DataStts from '@/enums/DataStts'

export default {
  name: "config",
  data() {
    return {
      dataStts:[],
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      total: 0,
      tableList:[],
      cateTree:[],
      query:{
        pageNum:1,
        pageSize:10,
        projectName:null,
        categoryId:null,
        categoryIds:null
      },
      parentCate:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否展开，默认全部展开
      isExpandAll: true,
      // 重新渲染表格状态
      refreshTable: true,
      // 表单参数
      form: {
        id:null,
        projectName:null,
        projectAmount:0,
        shareType:1,
        technicianRate:0,
        orderNum:0,
        categoryId:null,
        categoryIds:null
      },
      // 表单校验
      rules: {
        projectName: [
          { required: true, message: "项目名称不能为空", trigger: "blur" }
        ],
        projectAmount: [
          { required: true, message: "项目金额不能为空", trigger: "blur" }
        ],
        technicianRate: [
          { required: true, message: "技师分配比例不能为空", trigger: "blur" }
        ],
        sortNum: [
          { required: true, message: "排序不能为空", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.dataStts = DataStts;
    this.findPage();
    this.findTree();
  },
  methods: {
    findPage(){
      if(this.query.categoryIds !=undefined && this.query.categoryIds.length>0){
        this.query.categoryId = this.query.categoryIds[1];
      }
      findPage(this.query).then(res=>{
        this.tableList = res.data;
        this.total = res.total;
        this.loading = false;
      })
    },
    findTree(){
      findTree().then(res=>{
        this.cateTree = res;
      })
    },
    handleQuery(){
        this.query.pageNum = 1;
        this.findPage();
    },
    resetQuery(){
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleStatusChange(row){
      let text = row.dataStts === 1 ? "启用" : "停用";
      this.$modal.confirm('确认要"' + text + '""' + row.projectName + '"项目吗？').then(function() {
         const req ={id:row.id,dataStts:row.dataStts==1?1:2};
         modifyStts(req);
      }).then(() => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(function() {
        row.status = row.status === "0" ? "1" : "0";
      });
    },
    queryParentId(parentId){
      findParentId(parentId).then( res=>{
        this.parentCate = res;
         if(res == undefined || res.length <=0){
           this.parentCate =[];
         }
         this.parentCate.push({"id":"0","categoryName":"顶级分类"});
      });
    },
    handleAdd(row){
      this.reset();
      this.open = true;
      this.title = "添加项目";
    },
    handleUpdate(row){
        this.form= {
          id:row.id,
          projectName:row.projectName,
          projectAmount:row.projectAmount,
          technicianRate:row.technicianRate,
          orderNum:row.orderNum,
          categoryId:row.categoryId
        }
        this.open = true;
        this.title = "修改项目";
    },
    handleDelete(row){
      let _this = this;
      this.$modal.confirm('确认要删除"' + row.projectName + '"项目吗？').then(function() {
         delConfig(row.id).then(res=>{
           _this.$modal.alert("删除成功");
            _this.findPage();
         });
      });
    },
    submitForm(){
      this.$refs["form"].validate(valid => {
        if (valid) {
          // if(this.form.categoryIds.length !=2){
          //   this.$modal.alert("必须选择二级分类");
          //   return;
          // }
          // this.form.categoryId = 0;
          if (this.form.id != undefined) {
            modifyConfig(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.findPage();
            });
          } else {
            saveConfig(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.findPage();
            });
          }
        }
      });
    },
    cancel(){
      this.open = false;
      this.reset();
    },
    reset(){
      this.form= {
        id:null,
        categoryName:null,
        parentId:null,
        sortNum:null
      }
    },
  }
};
</script>
